<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/web.css">
  </head>

  <body class="backbox">
    <!-- The background for the phone -->
    <div class="background"></div>
    <div class="head wrapper">
      <img src="picture/let-me-help-you.jpg" class="logo" />
      <div class="nav">
        <ul>
          <li class="headani"><a href="index.html">Home</a></li>
          <li class="headani"><a href="trolley.html">Shopping Trolley</a></li>
          <li class="headani"><a href="#">Contact us</a></li>
        </ul>
      </div>
    </div>

    <div class="header2">
      <div style="height: 50px; background-color: #000000; text-align: right;">
          <img src="picture/header2.webp" style="object-fit: contain; height: 50px;" id="header2pic">
      </div>
      <ul class="headernav">
          <li><a href="index.html">Home</a></li>
          <li><a href="trolley.html">Shopping Trolley</a></li>
          <li><a href="#">Contact us</a></li>
      </ul>
  </div>

<!-- to the top -->
    <div class="totop">
        <!-- <img src="picture\jbc.jpg" alt="to the top"> -->
        <a  href="#"><img src="picture/jbc.jpg" alt="to the top" class="totopimg"></a>
        <p>TOP</p>
    </div>

	<div class="paywaypic">
		<span>
      <img src="picture/visa.jpg" class="paypic1">
    </span>
    <span>
      <img src="picture/wechat.jpeg" class="paypic2">
    </span>
    <span>
      <img src="picture/alipay.jpg" class="paypic3">
    </span>
	</div>

  <!-- Password -->
  <div class="paybox01">
    <div style="padding-top:5%; margin-left: 25%;">
      <div>
        Card Number:
      </div>
      <div class="textbox">
        <input type="text" id="cardnumber">
      </div><br>
      <div>Expiration Date</div>
            <span>
              <select id="month">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
              </select>
            </span>
            <span>
              <select id="year">
                <option>2019</option>
                <option>2020</option>
                <option>2021</option>
                <option>2022</option>
                <option>2023</option>
                <option>2024</option>
                <option>2025</option>
                <option>2026</option>
                <option>2027</option>
                <option>2028</option>
                <option>2029</option>
                <option>2030</option>
                <option>2031</option>
                <option>2032</option>
                <option>2033</option>
                <option>2034</option>
                <option>2035</option>
              </select>
            </span>
            <br><br>
            <div>Security Code</div>
            <div class="textbox">
              <input type="password" id="password">
            </div>
            <br>
      <div class="sub" id="sub">Submittion</div>
    </div>
  </div>

  <div class="paybox02">
    <img src="picture/payway01.jpg" style="height: 100%; object-fit: contain;">
  </div>
  
  <div class="paybox03">
    <img src="picture/payway02.jpg" style="height: 100%; object-fit: contain;">
  </div>

  <script src="js/pay.js"></script>
  <script src="js/web.js"></script>
  </body>
</html>
